<template>
  <div class="stock-register">
    <div>
      <el-form>
        <el-form-item>
          <h2>注册</h2>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="avatar-uploader"
            action="fake"
            :on-error="AvatarUpload"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img
              v-if="userInfo.avatar"
              :src="userInfo.avatar"
              class="avatar">
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon">
            </i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="userInfo.user_name"
            placeholder="请输入用户名">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="userInfo.password"
            placeholder="请输入密码"
            show-password>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            @click="register">
            注册
          </el-button>
          <el-button
            @click="login">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElForm, ElFormItem, ElInput, ElButton, ElUpload } from 'element-plus'
import { ROUTE_LOGIN, ROUTE_REGISTER } from '@/router/config'
export default defineComponent({
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    ElUpload,
  },
  setup(props, { attrs, slots, emit }) {
    const userInfo = ref({
      user_name: '',
      password: '',
      avatar: '',
    })
    const register = () => {
      console.log(userInfo.value)
    }
    const router = useRouter()
    const login = () => {
      router.push(ROUTE_LOGIN.use())
    }
    const AvatarUpload = (_, file) => {
      userInfo.value.avatar = URL.createObjectURL(file.raw);
    }
    const beforeAvatarUpload = () => {

    }
    return {
      userInfo,
      login,
      register,
      beforeAvatarUpload,
      AvatarUpload,
    }
  }
})
</script>

<style lang="scss">
  .stock-register {
    max-width: 250px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    padding: 10px 100px;
    box-shadow: var(--shadow);
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
